<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			#book{
				width: 500px;
				height: 700px;
				border: 1px solid black;
				border-radius: 12px;
				/*margin: 100px auto;*/
				background-color: wheat;
				padding: 20px;
				overflow: hidden;
				box-sizing: border-box;
				display: inline-block;
			}
			#left{
				display: inline-block;
				width: 200px;
				height: 500px;
				overflow: auto;
			}
			#ye{
				width: 100%;
				height: 100%;
								white-space: normal;
								position: relative;
				word-break: break-all;
				
			}
			pre{
				/*overflow: hidden;
				white-space: normal;*/
				white-space: pre-wrap;
				font-size: 16px;
			}
			
			#img{
				animation-name: ani;
				animation-duration: 2s;
				animation-iteration-count: infinite;
				animation-timing-function: linear;
			}
			@keyframes ani{
				from{
					transform: rotateZ(0);
				}
				to{
					transform: rotateZ(360deg);
				}
			}
		</style>
	</head>
	<body>
		<!--<div style="display: inline-block;width: 0;height: 0;border-bottom: 10px solid white;border-right: 10px solid black;"></div><div style="display: inline-block;width: 10px;height: 10px;background-color: black;"></div><div style="display: inline-block;width: 0;height: 0;border-top: 10px solid white;border-left: 10px solid black;">
			
		</div>-->
		
		<div id="left">
			
		</div>
		<div id="book">
			<div id="ye" >
				
			</div>
		</div>
		<button id="prev">上一页</button>
		<button id="next">下一页</button>
		<div id="load" style="position: fixed;left: 0;top: 0;bottom: 0;right: 0;background-color: rgba(7,17,27,0.3);">
			<div id="body" style="position: absolute;top: 50%;text-align: center;left: 0;width: 100%;z-index: 100000;">
			  <img src="./static/11514463ad25657bf2ec90d3c0742466.png" id="img"/>
			</div>
		</div>
		<!--<script src="index.js"></script>-->
		<!--<script type="module" src="index.js"></script>-->
		
	</body>
</html>
